<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>壁纸欣赏</title>
    <!--    轮播图-->
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--    导航栏-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        nav li:hover {
            background-color: #8c8c8c;
        }

        body {
            padding: 0;
            margin: 0;
            background: url("img/bgimgx.jpg") no-repeat fixed;
        }

        /*栅格式布局中图片设置*/
        .col-md-3, .col-sm-6 {
            position: relative;
            min-height: 2px;
            padding-right: 87px;
            padding-left: 15px;
        }

        .row {
            margin-right: -15px;
            margin-left: 34px;
        }

        /*视频设置*/
        #video-img {
            height: 700px;
            width: 1000px;
            margin-left: 374px;
        }

        .img-title {
            width: 100%;
            height: 52px;
            background-color: rgba(245 245 245 0.3);
            text-align: center;
            line-height: 26px;
            margin-top: 100px;
        }

        @font-face {
            font-family: fangzheng;
            src: url("/blog/fonts/FZFWZhuZGDSMCJW.TTF");
        }

        h2 {
            line-height: 49px;
            color: white;
            font-family: fangzheng;
        }

        .carousel-inner {
            margin: auto;
        }

        .navbar {
            margin-bottom: 0;
        }

        .item > img {
            width: 1700px;
        }

        .carousel-inner {
            width: 80%;
            height: 640px;

        }

        img {
            width: 100%;
            height: 100%;

        }

        #myCarousel {

        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">EVE空间站</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a th:href="@{/index}">首页</a>
                </li>
                <li>
                    <a th:href="@{/game-information}">游戏资讯</a>
                </li>
                <li>
                    <a th:href="@{/}">游戏攻略</a>
                </li>
                <li>
                    <a th:href="@{/imgshow}">壁纸欣赏</a>
                </li>
                <li>
                    <a href="#">游戏工具</a>
                </li>
                </li>
                <li>
                    <a th:href="@{login}">登录注册</a>
                </li>

            </ul>
        </div>
    </div>
</nav>


<div id="myCarousel" class="carousel slide">
    <!-- 轮播）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
        <li data-target="#myCarousel" data-slide-to="5"></li>
        <li data-target="#myCarousel" data-slide-to="6"></li>
        <li data-target="#myCarousel" data-slide-to="7"></li>
        <li data-target="#myCarousel" data-slide-to="8"></li>
    </ol>
    <!-- 轮播项目 -->

    <div class="carousel-inner">
        <div class="item active">

            <img th:src="@{/blog/img/盖伦特联邦.jpg}" alt="First slide" title="盖伦特联邦">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/天蛇集团.jpg}" alt="Second slide" title="天蛇集团">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/加达里合众国.jpg}" alt="Third slide" title="加达里合众国">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/古斯塔斯集团.jpg}" alt="Third slide" title="古斯塔斯集团">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/艾玛帝国.jpg}" alt="Third slide" title="艾玛帝国">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/血袭者.jpg}" alt="Third slide" title="血袭者">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/米玛塔尔共和国.jpg}" alt="Third slide" title="米玛塔尔共和国">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/天使集团.jpg}" alt="Third slide" title="天使集团">
        </div>
        <div class="item">
            <img th:src="@{/blog/img/朱庇特帝国.jpg}" alt="Third slide" title="朱庇特帝国">
        </div>
    </div>
    <!-- 轮播导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<div class="img-title">
    <h2>精美壁纸</h2>
</div>
<div class="row" >

    <div class="col-sm-6 col-md-3"  th:each="picture:${pictures}" >
        <a href="#" class="thumbnail"  >
            <img th:src="${picture.pictureaddress}" alt="通用的占位符缩略图" th:title="${picture.picturename}">[[${picture.picturename}]]
        </a>
    </div>
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img9.jpg}" alt="通用的占位符缩略图" title="盖伦特联邦">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img10.jpg}" alt="通用的占位符缩略图" title="加达里合众国">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img11.jpg}" alt="通用的占位符缩略图" title="米玛塔尔共和国">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img12.jpg}" alt="通用的占位符缩略图" title="地狱天使级战列舰">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img16.jpg}" alt="通用的占位符缩略图" title="监察者级巡洋舰">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img14.jpg}" alt="通用的占位符缩略图" title="自由无人机堡垒">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img15.jpg}" alt="通用的占位符缩略图" title="星际战争">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img13.jpg}" alt="通用的占位符缩略图" title="加达里泰坦-勒维亚坦级">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img17.jpg}" alt="通用的占位符缩略图" title="艾玛泰坦-神使级">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img18.jpg}" alt="通用的占位符缩略图" title="盖伦特泰坦-俄洛巴斯级">-->
        <!--</a>-->
    <!--</div>-->
    <!--<div class="col-sm-6 col-md-3">-->
        <!--<a href="#" class="thumbnail">-->
            <!--<img th:src="@{/blog/img/img20.jpg}" alt="通用的占位符缩略图" title="米玛塔尔泰坦-拉格纳洛克级">-->
        <!--</a>-->
    <!--</div>-->
</div>
<div class="img-title">
    <h2>视觉盛宴</h2>
</div>
<!--<div id="video-img">-->
    <!--<video id="video1" autoplay muted loop style="width: 100%" controls="controls">-->
        <!--<source class="source" src="../eve空间站/video/这就是《EVE%20Online》%20_%20Evideo-eve.mp4">-->
    <!--</video>-->

<!--</div>-->
</body>
</html>
